// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入组件
import MyHome from '@/components/MyHome.vue'
import MyMovie from '@/components/MyMovie.vue'
import MyMusic from '@/components/MyMusic.vue'
import MyAbout from '@/components/MyAbout.vue'

import AboutMe from '@/components/AboutMe.vue'
import AboutYou from '@/components/AboutYou.vue'

import NotFound from '@/components/NotFound.vue'
// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3. 创建路由的实例对象
const router = new VueRouter({
  // 配置使用那种模式,默认情况下是hash模式
  mode: 'history', // 指定使用历史模式的路由
  routes: [
    // 加入下面这条规则
    // 表示当hash地址为 / 时，让其转到 /home  redirect(重定向)
    { path: '/', redirect: '/home' },
    // 直接写到最大的数组中的 路由，叫做一级路由
    // 一级路由对应的组件，一定会显示到 App.vue 的占位符 位置
    { path: '/home', component: MyHome },
    { path: '/movie/:id/:name', component: MyMovie },
    { path: '/music', component: MyMusic },
    {
      path: '/about',
      component: MyAbout,
      children: [
        // 当前数组中，每个小对象中的组件，会显示在 MyAbout.vue 中占位符的位置
        // 下面的path开头不要用 / ，vue会自动拼接hash地址，拼接的结果为 /about/you
        { path: 'me', component: AboutMe },
        { path: 'you', component: AboutYou }
      ]
    },
    // 针对访问错误,给出404提醒
    { path: '*', component: NotFound }
  ]
})

// 4. 导出路由的实例对象
export default router
